<template>
    <div class="mt-3">
        <div class="mt-2" v-if="signedIn">
            <div class="form-group">
                <textarea name="body"
                          id="body"
                          class="form-control"
                          placeholder="说点什么吧。。。"
                          rows="5"
                          v-model="body"
                          required
                >
                </textarea>
            </div>
            <button type="submit" class="btn btn-default"
                    @click="addReply">提交
            </button>
        </div>
        <p class="text-center" v-else>
            请先<a href="/login">登录</a>，然后再发表回复
        </p>
    </div>
</template>
<script>
    import 'jquery.caret';
    import 'at.js';

    export default {
        props: ['endpoint'],
        data() {
            return {
                body: '',
            }
        },
        computed: {
            signedIn() {
                return window.App.signedIn;
            }
        },
        mounted() {
            $('#body').atwho({
                at: "@",
                delay: 750,
                callbacks: {
                    remoteFilter: function(query, callback) {
                        $.getJSON("/api/users", {name: query}, function(usernames) {
                            callback(usernames)
                        });
                    }
                }
            });
        },
        methods: {
            addReply() {
                axios.post(this.endpoint, {body: this.body})
                    .catch(error => {
                        flash(error.response.data, 'danger');
                    })
                    .then(({data}) => {
                        this.body = '';
                        flash('New reply added!');
                        this.$emit('created', data);
                    })
            }
        }
    }
</script>
